$(function () {
  class Mart {
    constructor() {
      this.list = $('.outdoor .list')
      this.goods = $('.mart .list .goods')
      this.data = {}
      this.getDatas();
      this.bindEvent()
    }

    

    //获取其余的数据
    getDatas() {
      let options = {
        url: '../../static/data/index/outdoor.json'
      }
      axios(options).then(res => {
        this.datas = res.data
        this.render(this.datas)
        const observer = lozad();
        observer.observe();
      })
    }
    render(data) {
      for (let i = 0; i < data.length; i++) {
        this.list.append(`<li class="goods">
          <img class='lozad' data-src='${data[i].src}'>
          <div class='title'>${data[i].title}</div>
          <div class='price'>${data[i].price}</div>
        </li>`)
      }
    }
    bindEvent() {
      this.list.on('click', '.goods', (e) => {
        console.log(e.target.parentNode);
        let ms = $(e.target).parents('.outdoor .list .goods')
        console.log(ms);
        this.data.src = $(ms).find('.lozad').attr('src')
        this.data.title = $(ms).find('.title').html()
        this.data.price = $(ms).find('.price').html()
        location.href = '../../dist/goods-details.html#id=' + encodeURI(JSON.stringify(this.data))
      })
    }

  }
  new Mart();
})